<template lang="pug">
    div(class="layout")
        Layout
            Content(:style="{padding:'5px 10px'}")
                Row(style="margin-bottom:10px")
                    Col(span="24")
                        Card(style="width:100%")
                            p.header(slot="title")
                                Icon(type="stats-bars")
                                | &emsp;全局概览
                            //- .extraCtrl(slot="extra")
                            //-     ButtonGroup
                            //-         Tooltip(content="单选")
                            //-             Button(:type="multiMode?'ghost':'success'", icon="android-radio-button-on")
                            //-         Tooltip(content="多选")
                            //-             Button(:type="multiMode?'success':'ghost'", icon="android-checkbox")
                            //-         Tooltip(content="清空选择")
                            //-             Button(type="primary", icon="ios-trash", :disabled="!hasSelected", @click="clear")
                            .overview
                                global(ref="global", @barSelect="updateList")
                Row(:gutter="16")
                    Col(span="6")
                        Card(style="width:100%;")
                            p.header(slot="title")
                                Icon(type="ios-settings-strong")
                                | &emsp;测试列表
                            Form(:label-width="80", style="margin-top:5px")
                                FormItem(label="排序方式:", v-model="formItem", style="margin-bottom: 5px")
                                    Row
                                        Col(span="7")
                                            Select(v-model="formItem.select", size="small", @on-change="changeBySort")
                                                Option(value="test_id")  编号
                                                Option(value="start_time") 时间
                                                Option(value="start_type") 类型
                                        Col(span="17")
                                            Checkbox(v-model="formItem.type") 起动类型
                                            Checkbox(v-model="formItem.anomaly") 异常
                            .list
                                //- Spin(fix, v-if="listState")
                                //- Tree(:data="table.listInstances")
                                Table(highlight-row, height="383", size="small", :columns="table.columns", :data="table.data", :loading="listLoading", @on-row-click="selectRow")
                                Page(simple
                                    :current="table.records.current"
                                    :total="table.records.total",
                                    :page-size="table.records.pageSize"
                                    style="margin:5px 0;text-align:left;"
                                    @on-change="changePage")
                    Col(span="18")
                        Card(style="width:100%;height:532px")
                            Tabs(type="card")
                                TabPane(label="时序趋势")
                                    trend(ref="trend")
                                TabPane(label="时序特征")
                                    feature
</template>

<script>
/* eslint-disable */
import global from '@/components/global';
import trend from '@/views/trends/index';
import feature from '@/views/features/index';

export default {
    data() {
        return {
            listLoading: false,
            // default: true, // 列表显示的内容，默认还是选择
            // hasSelected: false, // 概览图是否进行了选择操作
            dataset: [
                {
                    value: 11,
                    label: 'SG840108-11'
                },
                {
                    value: 40,
                    label: 'SG077443-40'
                }
            ],
            formItem: {
                select: 'test_id',
                type: true,
                anomaly: true
            },
            table: {
                records: {
                    total: 250000,
                    pageSize: 100,
                    current: 1
                },
                columns: [
                    {
                        title: '编号',
                        key: 'test_id',
                        width: 90,
                        fixed: 'left',
                        align: 'center'
                    },
                    {
                        title: '日期',
                        key: 'date',
                        align: 'center',
                        width: 170
                    },
                    {
                        title: '状态',
                        key: 'abnormal_type',
                        width: 120,
                        render: (h, params) => {
                            const row = params.row;
                            const color =
                                row.abnormal_type === 0 ||
                                row.abnormal_type === 1
                                    ? 'green'
                                    : 'red';
                            const text =
                                row.abnormal_type === 0 ||
                                row.abnormal_type === 1
                                    ? '正常'
                                    : '异常';

                            return h(
                                'Tag',
                                {
                                    props: {
                                        type: 'dot',
                                        color: color
                                    }
                                },
                                text
                            );
                        },
                        filters: [
                            {
                                label: '正常',
                                value: 0
                            },
                            {
                                label: '异常',
                                value: 1
                            }
                        ],
                        filterMultiple: false,
                        filterMethod(value, row) {
                            if (value === 0) {
                                return (
                                    row.abnormal_type === 0 ||
                                    row.abnormal_type === 1
                                );
                            } else {
                                return (
                                    row.abnormal_type !== 0 &&
                                    row.abnormal_type !== 1
                                );
                            }
                        }
                    },
                    {
                        title: '异常标签',
                        key: 'abnormal_type',
                        width: 100,
                        render: (h, params) => {
                            const row = params.row;
                            const text =
                                row.abnormal_type === 0 ||
                                row.abnormal_type === 1
                                    ? '--'
                                    : String(row.abnormal_type);

                            return h(
                                'Tag',
                                {
                                    props: {
                                        type: 'border'
                                    }
                                },
                                text
                            );
                        }
                    }
                ],
                data: []
            },
            selectionParams: {
                starterId: '',
                date: '', // 日期 string
                label: '', // 状态标签 正常或异常
                type: '' // 类型的在数据库中对应的值
            }
        };
    },
    components: {
        global,
        trend,
        feature
    },
    computed: {
        selection() {
            return this.$store.state.selection;
        },
        range() {
            return this.$store.state.range;
        },
        starterId() {
            return this.$store.state.starterId;
        },
        hasSelected() {
            return this.$store.state.hasSelected;
        },
        multiMode() {
            return this.$store.state.multiMode;
        },
        color() {
            return this.$store.state.color;
        }
    },
    watch: {
        starterId() {
            this.table.records.total = this.range[1] - this.range[0] + 1;
            this.loadDefaultData(1);
        }
    },
    methods: {
        // 默认无交互时获取默认数据的方法
        loadDefaultData(page) {
            this.listLoading = true;
            const data = {
                starterId: this.starterId,
                sortMode: this.formItem.select,
                offset:
                    (page - 1) * this.table.records.pageSize +
                    this.range[0] -
                    1,
                size: this.table.records.pageSize
            };
            this.$http
                .get('/starter/list/default/', {
                    params: data
                })
                .then(res => {
                    this.table.data = res.data.map(d => {
                        return {
                            test_id: d.test_id,
                            date: d.start_time.replace(/[TZ]/g, ' '),
                            start_type: d.start_type,
                            abnormal_type: d.abnormal_type
                        };
                    });

                    this.$store.commit(
                        'changeTestSet',
                        res.data.map(d => d.test_id)
                    );
                })
                .catch(err => {
                    console.error(err);
                    this.$Message.error('Failed to load table data');
                })
                .finally(() => {
                    this.listLoading = false;
                });
        },
        // 获取选择列表数据的方法
        loadSelectData(page) {
            //   debugger;
            this.listLoading = true;
            if (this.multiMode) {
                // 多选时的取值逻辑
            } else {
                // 单选时的取值逻辑
                this.$http
                    .get('/starter/overview/selection', {
                        params: {
                            starterId: this.starterId,
                            sortMode: this.formItem.select,
                            offset: (page - 1) * this.table.records.pageSize,
                            size: this.table.records.pageSize,
                            date: this.selectionParams.date,
                            label: this.selectionParams.label,
                            type: this.selectionParams.type
                        }
                    })
                    .then(res => {
                        this.table.data = res.data.map(d => {
                            return {
                                test_id: d.test_id,
                                date: d.start_time.replace(/[TZ]/g, ' '),
                                start_type: d.start_type,
                                abnormal_type: d.abnormal_type
                            };
                        });

                        this.$store.commit(
                            'changeTestSet',
                            res.data.map(d => d.test_id)
                        );
                    })
                    .catch(err => {
                        console.error(err);
                        this.$Message.error('Failed to load table data');
                    })
                    .finally(() => {
                        this.listLoading = false;
                    });
            }
        },
        changeBySort() {
            if (!this.hasSelected) {
                this.loadDefaultData(this.table.records.current);
            } else {
                this.loadSelectData(this.table.records.current);
            }
        },
        updateList(e) {
            // 执行列表数据取值请求
            //   alert("okkk");
            console.log('hook', e);
            debugger;
            this.table.records.current = 1;
            this.table.records.total = Number(e.value);
            this.selectionParams.starterId = this.starterId;
            this.selectionParams.date = e.date;
            this.selectionParams.label = e.label;
            this.selectionParams.type = e.labelName;
            this.$refs.trend.clearData();
            this.loadSelectData(1);
            // 执行时序趋势图的数据请求
            this.$refs.trend.loadTrend(this.selectionParams);
        },
        // 翻页
        changePage(p) {
            this.table.records.current = p;
            if (!this.hasSelected) {
                this.loadDefaultData(p);
            } else {
                this.loadSelectData(p);
            }
        },
        // 清空触发操作
        clear() {
            this.$refs.global.recover();
            this.table.records.total = this.range[1] - this.range[0] + 1;
            this.$refs.trend.clearData();
            this.loadDefaultData(1);
        },
        // 单击表格某一行触发交互动作
        selectRow(data) {
            this.$store.commit('setTestId', data.test_id);
        }
    },
    created() {
        this.table.records.total = this.range[1] - this.range[0] + 1;
        this.loadDefaultData(1);
    }
};
</script>

<style lang="less">
.layout {
    background-color: #f0f0f0;
    div {
        box-sizing: border-box;
    }
    .layout-con {
        height: 100%;
        width: 100%;
    }
    .ivu-card-body {
        padding: 0px;
    }
    .title {
        height: 30px;
        width: 100%;
        border-bottom: 1px solid #e9eaec;
        line-height: 30px;
        text-align: left;
        padding: 0 10px;
        font-size: 13px;
        font-weight: 700;
        background-color: #1c2438;
        color: #e9eaec;
    }
    .header {
        text-align: left;
    }
    .list {
        width: 94%;
        // height: 430px;
        margin: 0 3%;
        // background-color: #f8f8f9;
        // overflow: auto;
        position: relative;
    }
    .demo-spin-icon-load {
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(180deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
}
.overview {
    width: 100%;
    height: 100%;
}
.ivu-card-extra {
    top: 9px;
}
</style>
